/**
 * Created by hdw on 2017/5/16.
 */
import React, {Component} from 'react'
import {Link} from 'react-router'
import '../../../src/js/swiper.min.js'
import '../sass/Banner'

export default class Banner extends Component {
  constructor() {
    super()
  }

  componentDidMount() {
    const {n, items} = this.props

    new Swiper(`.banner${n}`, {
      direction: 'horizontal',
      speed: 500,
      autoplay: 3000,
      autoplayDisableOnInteraction: false,
      loop: true,
      pagination: `.dot${n}`,
      paginationClickable: true,
      lazyLoading: true
    })

    let el = document.getElementsByClassName(`slide${n}`)

    if (el.length && items[items.length - 1].link) {
      el[0].onclick = function() {
        window.location.href = items[items.length - 1].link
      }
    }
    if (el.length && items[0].link) {
      el[el.length - 1].onclick = function() {
        window.location.href = items[0].link
      }
    }
  }

  render() {
    const {n, items, jumpTo} = this.props

    const length = items.length

    if (length > 1) {
      return (
      <div className={`swiper-container banner${n}`}>
          <div className="swiper-wrapper">{
              items && items.map((item, index) =>
                  <div className={`swiper-slide slide${n}`} key={index} onClick={item.link ? jumpTo.bind(this, item.link) : null}>
                      <img className="swiper-lazy" data-src={item.pictureUrl ? item.pictureUrl : require('../images/banner_default.png')} width="100%" alt=""/>
                  </div>
              )
          }
          </div>
          <div className={`swiper-pagination dot${n}`}></div>
      </div>
      )
    } else if (length == 1) {
      return (
      <div className="banner" onClick={items[0].link ? jumpTo.bind(this, items[0].link) : null}>
          <Link className="link">
              <img src={items[0].pictureUrl ? items[0].pictureUrl : require('../images/banner_default.png')}/>
          </Link>
      </div>
      )
    } else {
      return (
        <section></section>
      )
    }
  }
}
